<template>
  <view class="popup">
    <uni-popup ref="popup" type="center" background-color="#fff">
      <uni-card :is-shadow="false">
        <view class="title">
          <uni-nav-bar shadow left-icon="left" :title="'修改' + props.tempUserInfo.propsName" @clickLeft="back" />
        </view>
        <view class="content">
          <uni-forms ref="form" :modelValue="info" :rules="rules" validate-trigger="bind">
            <div v-if="needPwd">
              <uni-forms-item name="password" label="验证" required>
                <uni-easyinput type="password" v-model="info.password" placeholder="请输入密码" />
              </uni-forms-item>
            </div>
            <uni-forms-item :label='comSign' name="old">
              <uni-easyinput type="textarea" v-model="props.tempUserInfo.attr" placeholder="请输入内容" />
            </uni-forms-item>
            <uni-forms-item :label="newSign" name="new" v-if="props.tempUserInfo.propsName !='密码'">
              <uni-easyinput type="textarea" autoHeight v-model="info.message" placeholder="请输入内容" />
            </uni-forms-item>
            <div v-if="props.tempUserInfo.propsName =='密码'">
              <uni-forms-item name="newpwd" :label="newSign" required>
                <uni-easyinput type="password" v-model="info.newpwd" placeholder="请输入新密码" />
              </uni-forms-item>
            </div>

          </uni-forms>

          <button type="default" @click="sendNewData">确定</button>
        </view>
      </uni-card>

    </uni-popup>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    getCurrentInstance,
    watch,
    computed
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    requestNet
  } from '@/api/base.js'
  import {
    useUserStore
  } from '@/store/user.js'
  const user = useUserStore()
  const emit = defineEmits(['getNewData'])
  const props = defineProps({
    tempUserInfo: {
      type: Object,
      default: {}
    },
    isShowPopup: {
      type: Boolean,
      default: false
    }
  })

  const info = reactive({
    message: props.tempUserInfo.attr || '',
    password: null,
    token: '',
    userid: null,
    newpwd: null, //新密码
  })
  const instance = getCurrentInstance()
  const popup = ref(null)
  const form = ref(null)
  const needPwd = ref(null)
  const comSign = computed(() => {
    return '原' + props.tempUserInfo.propsName
  })
  const newSign = computed(() => {
    return '新' + props.tempUserInfo.propsName
  })
  const rules = ref({
    password: {
      rules: [{
        required: true,
        errorMessage: '密码不能为空',
      }]
    },
    newpwd: {
      rules: [{
        required: true,
        errorMessage: '输入不能为空',
      }, {
        //自定义规则
        validateFunction: function(rule, value, data, callback) {
          if (value == info.password) {
            callback('输入密码与原密码一致')
          }
          return true
        }
      }]
    }
  })
  //判断是否需要密码验证
  function isNeedPwd() {
    if (props.tempUserInfo.propsName == '用户名' || props.tempUserInfo.propsName == '邮箱' || props.tempUserInfo.propsName ==
      '密码') {
      needPwd.value = true
    } else needPwd.value = false
  }
  //返回
  function back() {
    if (props.tempUserInfo.id) {
      uni.navigateTo({
        url: `/pages/userdetail/userdetail?id=${props.tempUserInfo.id}`
      })
    } else {
      uni.navigateBack({
        delta: 1
      })
    }

  }

  //发送新数据给父组件
  function sendNewData() {
    //如果验证通过
    form.value.validate().then(res => {
      // console.log(res)
      if (needPwd.value) { //需要密码验证
        //验证密码的正确性
        requestNet({
          url: '/api/checkPwd',
          method: 'POST',
          data: {
            userid: info.userid,
            password: res.password
          },
          header: {
            token: info.token
          }
        }).then(data => {
          let code = data.data.code
          if (code == 200) { //密码验证成功
            emit('getNewData', {
              propsName: props.tempUserInfo.propsName,
              value: info.message,
              password: res.password || undefined,
              newpwd: res.newpwd || undefined
            })
            info.message = ''
            popup.value.close()
          } else if (code == 400) {
            uni.showToast({
              title: '密码验证错误,请重新输入',
              icon: 'error'
            })
          }
        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'error'
          })
        })
      } else { //没有需要密码验证
        emit('getNewData', {
          propsName: props.tempUserInfo.propsName,
          value: info.message,
          password: res.password || undefined,
        })
        info.message = ''
        popup.value.close()
      }

    }).catch(err => {
      uni.showToast({
        title: '上述信息输入有误',
        icon: 'error'
      })
    })

  }

  //监视是否需要 弹出层
  watch(() => props.isShowPopup, () => {
    popup.value.open()
    isNeedPwd()
  })

  onLoad((e) => {
    info.userid = parseInt(e.id)
    popup.value = instance.refs.popup
    form.value = instance.refs.form
    info.token = user.token
  })
</script>

<style lang="scss" scoped>
  .popup {
    text-align: center;
    padding: 200rpx;

    .title {}

    .content {
      margin-top: 40rpx;

      &-item {
        display: flex;
        align-items: center;

        span {
          margin-right: 20rpx;
        }
      }
    }
  }

  .uni-mt-5 {
    margin-bottom: 20rpx;
  }

  :deep(.uni-popup .uni-popup__wrapper[data-v-7c43d41b]) {
    width: 95% !important;
  }

  :deep(.uni-forms-item__label[data-v-61dfc0d0]) {
    width: 70px !important;
  }
</style>
